<template>
<div>
	<div class="g_top_box">
		<div class="g_right_box">
			<!--Button type="primary" @click="$router.push({name:'user_add'})">添加</Button-->
		</div> 
		<div class="g_left_box"><h4>模块列表</h4></div>
	</div>
	
	<div class="g_list_box">
		<div class="g_filter_box">
			<!--Form ref="formDynamic" :label-width="50" style="width: 100%">
				<Input v-model="filter.nickname" placeholder="会员名称" style="width:130px;"></Input>
				<Input v-model="filter.mobile" placeholder="手机号码" style="width:130px;"></Input>
				<Button type="primary" @click="qurey">搜索</Button>
			</Form-->
		</div>
		<div class="g_list_box">
			<Table :columns="Columns" :data="list" style="width: 100%;"></Table>
		</div>
		<div class="g_page_box">
			<Page :total="count" @on-change="goto_page"></Page>
		</div>
	</div> 
</div>
</template>

<script>
export default {
    name: 'module_list',
    data () {
		let self = this;
        return {
            Columns: [
				{
					type: 'index',
					align: 'center',
                    width: 50
                },
				{
                    title: '名称',
					key: 'name',
					width: 120,
                },
				{
                    title: '模块名称',
					key: 'module_name',
					width: 120,
                },
				{
                    title: '详细',
					key: 'info',
					width: 300,
                },
				{
                    title: '是否安装',
					key: 'is_install',
					width: 120,
					align:'center',
					render: (h, params) => {
						var sarr = ['否','是'];
						return h('div',{
							style:{
								color:params.row.is_install?'#4CAF50':'red'
							}
						},sarr[params.row.is_install] );
					}
					
                },
				{
                    title: '是否启用',
					key: 'is_enable',
					width: 120,
					align:'center',
					render: (h, params) => {
						var sarr = ['否','是'];
						return h('div',{
							style:{
								color:params.row.is_enable?'#4CAF50':'red'
							}
						},sarr[params.row.is_enable] );
					}
                },
				{
					title: '操作',
					key: 'action',
					render: (h, params) => {
					
						var btns = [
							h('Button', {
								props: {
									type: 'primary',size: 'small',
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										self.install(params.row.module_name);
									}
								}
							},'安装'),
							h('Button', {
								props: {
									type: 'primary',size: 'small',
								},
								style: {
									marginRight: '5px',
								},
								on: {
									click: () => {
										self.uninstall(params.row.module_name);
									}
								}
							},'卸载')
						]
					
					
						return h('div', [
							btns[params.row.is_install]
						]);
					}
				}
            ],
            list: [],
			count:0,
			page:1,
			filter:{
				nickname:'',
				mobile:''
			}
        };
    },
	created(){
		
		this.load_data();
	},
    computed: {
       
    },
	methods:{
		load_data(){
			var self = this;
			
			var postdata = {
				f:this.filter,
				page:this.page
			}
			
			Whttp.load('System/Module/get_list',postdata,function(result){
				self.list = result.list;
				self.count = parseInt(result.count);
			});
		},
		goto_page(page){
			this.page = page;
			this.load_data();
		},
		qurey(){
			this.page = 1;
			this.load_data();
		},
		install(module_name){
			if(!confirm('是否安装模块')){
				return;
			}
			var self = this;
			var postdata = {
				name:module_name
			};
			Whttp.load('System/Module/install',postdata,function(result){
				self.$Message.success('安装成功');
				self.load_data();
				
				self.$emit('update_menu',1);
			});
		},
		uninstall(module_name){
			if(!confirm('是否卸载模块.\n卸载后，数据库所产生的数据将会被清空')){
				return;
			}
			
			var self = this;
			var postdata = {
				name:module_name
			};
			Whttp.load('System/Module/uninstall',postdata,function(result){
				self.$Message.success('卸载成功');
				self.load_data();
				self.$emit('update_menu',1);
			});
		}
	}
};
</script>